<template>
  <div class="page">
    <div class="top">
      <svg-icon icon-class="close" class="icon" />
      <span>小可爱</span>
      <svg-icon icon-class="more" class="icon" />
    </div>
    <!-- banner -->
    <van-swipe :autoplay="autoplay" indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in bannerList" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- tab -->
    <ul class="tab">
      <li
        v-for="(item, index) in tabList"
        @click="jump(item.href)"
        :key="index"
      >
        <img :src="item.img" />
        <span>{{ item.title }}</span>
      </li>
    </ul>
    <!-- 文本区域 -->
    <div class="content">
      <van-tabs swipeable @click="menuChange" @change="menuChange">
        <van-tab
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.title"
        >
          <component :is="curCmt" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import intro from "./components/Intro";
import bulletin from "./components/Bulletin";
import explanation from "./components/Explanation";
import proxy from "./components/Proxy";
import problem from "./components/Problem";
export default {
  data() {
    return {
      autoplay: 3000, // 自动播放时长
      bannerList: [
        require("../../assets/images/banner.png"),
        require("../../assets/images/banner.png")
      ],
      tabList: [
        {
          img: require("../../assets/images/hot1.png"),
          title: "定期理财",
          href: "finances"
        },
        {
          img: require("../../assets/images/recharge.png"),
          title: "充值管理",
          href: "recharge"
        },
        {
          img: require("../../assets/images/withdraw.png"),
          title: "提现管理",
          href: "withdraw"
        },
        {
          img: require("../../assets/images/hot2.png"),
          title: "邀请好友",
          href: "share"
        }
      ],
      menuList: [
        { title: "平台简介", name: "intro" },
        { title: "平台公告", name: "bulletin" },
        { title: "规则说明", name: "explanation" },
        { title: "合作代理", name: "proxy" },
        { title: "常见问题", name: "problem" }
      ],
      curCmt: "intro"
    };
  },
  components: {
    intro,
    bulletin,
    explanation,
    proxy,
    problem
  },
  methods: {
    menuChange(index) {
      this.curCmt = this.menuList[index].name;
    },
    jump(name) {
      this.$router.push({ name });
    }
  }
};
</script>

<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  li {
    width: 13%;
    margin: 6%;
    line-height: 2;
    font-family: "Adobe Heiti Std R";
    color: #85a5cd;
    text-align: center;
    span {
      white-space: nowrap;
    }
  }
}
</style>
